<template>
    <div>
        <el-row>
            <el-row>
                <span>词云图</span>
                <span>依赖于:echarts echarts-wordcloud</span>
            </el-row>
            <el-row id="word-cloud-area"></el-row>
        </el-row>
        <el-row>
            刮奖
            <AgScratchCard></AgScratchCard>
        </el-row>
        <el-row>
            自己的弹幕
            <AgDanmu></AgDanmu>
        </el-row>
        <el-row>弹幕</el-row>
        <el-row id="danmu-wrapper">
            <el-row id="danmu-content"></el-row>
            <el-row id="danmu-area"></el-row>
            <!-- <video id="danmu-area" autoplay="true" muted playsinline controls="controls">
                <source src="//s1.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4" type="video/mp4" />
                your browser does not support the video tag
            </video> -->
        </el-row>

    </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import 'echarts-wordcloud';
import DanmuJs from 'danmu.js';
import AgDanmu from '@/components/myself/AgDanmu.vue';
import AgScratchCard from '@/components/myself/AgScratchCard.vue';
onMounted(() => {
    initChart();
    initDanmu();
})
const data = [
    { value: 100, name: '披星戴月' },
    { value: 100, name: '走南闯北' },
    { value: 100, name: '马不停蹄' },
    { value: 100, name: '默默无闻' },
    { value: 100, name: '奋发图强' },
    { value: 100, name: '大本营守卫者' },
    // { value: 60, name: '诲人不倦' },
    // { value: 42, name: '学习之星' },
    // { value: 96, name: '一个神秘人' },
    // // { value: 54, name: '蒸蒸日上' },
    // { value: 33, name: '智慧非凡' },
    // { value: 84, name: '兢兢业业' },
    // { value: 86, name: '刺猬' }
]
const initChart = () => {
    const myChart = echarts.init(document.getElementById('word-cloud-area') as HTMLDivElement);
    const option = {
        series: [{
            type: 'wordCloud',
            // 要绘制云的形状,默认是 circle，可选的参数有 cardioid 、 diamond 、 triangle-forward 、 triangle 、 star
            shape: 'cardioid',
            // 保持maskImage的纵横比或1:1的形状
            // 从echarts-wordcloud@2.1.0开始支持该选项
            keepsAspect: true,
            // 左/上/宽/高/右/下用于字云的定位
            // 默认放置在中心，大小为75% x 80%。
            left: 'center',
            top: 'center',
            width: '500px',
            height: '500px',
            right: /*null,*/'center',
            bottom: /*null,*/'center',
            // 文本大小范围
            sizeRange: [12, 60],
            // 文本旋转范围
            rotationRange: [-90, 90], //  
            // 文字旋转角度
            rotationStep: 30,

            // 网格大小(以像素为单位)，用于标记画布的可用性
            // 网格大小越大，单词之间的间隔就越大
            gridSize: 10,

            drawOutOfBound: false,
            // 超出画布是否绘制

            shrinkToFit: false,
            // 缩放
            layoutAnimation: true,
            // 动画
            // 全局文本样式
            textStyle: {
                fontFamily: 'sans-serif',
                fontWeight: 'bold',
                // Color可以是回调函数或颜色字符串
                color: function () {
                    // 任意颜色
                    return (
                        'rgb(' +
                        [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                        ].join(',') +
                        ')'
                    )
                },
            },
            emphasis: {
                focus: 'self',
                textStyle: {
                    textShadowBlur: 10,
                    textShadowColor: '#333',
                },
            },
            data: data,
            tooltip: {},
        }]
    }
    myChart.setOption(option);
}
let danmu: any = null;
const initDanmu = () => {
    danmu = new DanmuJs({
        container: document.getElementById('danmu-content'), //弹幕容器，该容器发生尺寸变化时会自动调整弹幕行为
        containerStyle: {
            //弹幕容器样式
            zIndex: 100
        },
        player: document.getElementById('danmu-area'), //配合音视频元素（video或audio）同步使用时需提供该项
        comments: [
            //弹幕预存数组,配合音视频元素（video或audio）同步使用时需提供该项
            {
                duration: 20000, //弹幕持续显示时间,毫秒(最低为5000毫秒)
                //moveV: 100, //弹幕匀速移动速度(单位: px/秒)，设置该项时duration无效
                id: '1', //弹幕id，需唯一
                start: 0, //弹幕出现时间（毫秒）
                prior: true, //该条弹幕优先显示，默认false
                color: true, //该条弹幕为彩色弹幕，默认false
                txt: '长弹幕长弹幕长弹幕长弹幕长弹幕', //弹幕文字内容
                style: {
                    //弹幕自定义样式
                    color: '#213547',
                    fontSize: '20px',
                    padding: '2px 11px'
                },
                mode: 'top', //显示模式，top顶部居中，bottom底部居中，scroll滚动，默认为scroll

                // like: {
                //     // 点赞相关参数
                //     el: likeDOM, // el 仅支持传入 dom
                //     style: {
                //         // el 绑定样式
                //         paddingLeft: '10px',
                //         color: '#ff0000'
                //     }
                // }

                // el: DOM //直接传入一个自定义的DOM元素作为弹幕，使用该项的话会忽略所提供的txt和style
            }
        ],
        area: {
            //弹幕显示区域
            start: 0, //区域顶部到播放器顶部所占播放器高度的比例
            end: 1, //区域底部到播放器顶部所占播放器高度的比例
            lines: 3 // 弹幕虚拟轨道显示行数。当指定行数时，显示范围 start/end 不生效；当弹幕字体大小超过所需要的总虚拟轨道数时，弹幕也不会出现在轨道上，因此请设置好弹幕fontSize及影响弹幕高度的其他样式，让弹幕和轨道高度匹配
        },
        channelSize: 40, // 轨道大小
        mouseControl: true, // 打开鼠标控制, 打开后可监听到 bullet_hover 事件。danmu.on('bullet_hover', function (data) {})
        mouseControlPause: false, // 鼠标触摸暂停。mouseControl: true 生效
        //bOffset: 1000, // 可调节弹幕横向间隔（毫秒）
        defaultOff: true, // 开启此项后弹幕不会初始化，默认初始化弹幕
        chaseEffect: true // 开启滚动弹幕追逐效果, 默认为true
    });
    start();
    console.log('弹幕状态', danmu.status);
}
const start = () => {
    danmu.start();
    let id = 1;
    setInterval(function () {
        id++;
        let like = document.createElement("span");
        like.innerText = "10w+";
        // console.log(document.getElementById('duration').value || 5000)
        danmu.sendComment({
            //发送弹幕
            duration: 5000,
            id: id + "213",
            txt: id + "444", //弹幕文字内容
            style: {
                fontSize: "25px",
                lineHeight: 1.125,
                color: "#000",
            },
            originData: {
                x: "2121",
            },
            like: {
                el: like,
                style: {
                    paddingLeft: "10px",
                    color: "#ff0000",
                },
            },
        });
    }, 100);
}
</script>
<style lang="scss" scoped>
#word-cloud-area {
    // width: 500px;
    height: 500px;
}

#danmu-wrapper {
    position: relative;
    // width: 1280px;
    height: 500px;

    #danmu-content {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        // z-index: 9999
    }

    #danmu-area {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
</style>